<template>
  <div class="wrapper" style="display:none;">
    <div class="enter">
      <div class="enter-text" @click="showIM = true">
        在线客服
      </div>
      
    </div>
    <div class="im" v-if="showIM">
      <div class="im-title">在线客服</div>
      <div class="im-user">
          用户列表
      </div>
      <div class="im-content">
          <div class="im-content-view">
            <div v-for="item in imContent" :key="item.id">
              {{item.create_time}}
              {{item.msg}}
            </div>
          </div>
          <div class="im-editor">
            <input type="text" v-model="msg" />
            <button @click="send">发送</button>
          </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.enter{cursor:pointer;position:fixed;right:0;top:50%;height:100px;width:60px;display: flex;align-items: center;justify-content: center;margin-top:-50px;box-sizing: border-box;border:1px solid #ccc;}
.enter-text{writing-mode: tb-rl;}

.im{display: flex;background:#fff;box-sizing: border-box;border:1px solid #ccc;border-radius: 5px;width:800px;height:500px;position: fixed;z-index:10;left:50%;top:50%;margin-left:-400px;margin-top:-250px;}
.im-user{width:100px;border-right: 1px solid #ccc;box-sizing: border-box;}
.im-content{display: flex;flex-direction: column;}
.im-content-view{flex:0 0 400px;border-bottom:1px solid #ccc;box-sizing: border-box;}
</style>

<script>

import { getTime } from "@/utils"
export default {
  name: 'custServiceOL',
  components: {  },
  props: {
    
  },

  data () {
    return {
      showIM:false,
      toUserId:762,
      msg:'',
      imContent:[]
    }
  },
  methods: {
    send(){
      let msg = this.msg.trim();
      if (msg == '') return;
      let data  = {user_id:this.toUserId,msg,create_time:getTime()};
      this.imContent.push(data)
      this.$store.dispatch('ws/sendCustServiceMsg',data);
    }
  },
  computed:{

  }
}
</script>


